<template>
  <div class="page-register2">
    <article class="header">
      <header>
        <nuxt-link to="/">
          <img src="@/assets/img/logo.png" alt="logo" height="40px" width="100px" />
        </nuxt-link>
        <span class="login" style="margin-top:5px">
          <em class="bold">请将您的商铺信息补充完整，获得更多的曝光机会</em>
        </span>
      </header>
    </article>
    <section>
      <el-form ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="门店类型" prop="shopKind">
          <el-radio-group v-model="shop.shopKind">
            <el-radio-button label="美食"></el-radio-button>
            <el-radio-button label="饮品"></el-radio-button>
            <el-radio-button label="生鲜"></el-radio-button>
            <el-radio-button label="百货"></el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-row>
          <el-col :span="8">
            <el-form-item label="负责人" prop="contactMan">
              <el-input v-model="shop.contactMan" />
              <div class="error">{{ eError }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="联系电话" prop="contactMobile">
              <el-input v-model="shop.contactMobile" maxlength="13" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="地址" prop="address">
          <el-input v-model="shop.address" maxlength="20" />
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="logo图片" prop="logoImg">
              <el-upload
                class="avatar-uploader"
                action="api/user/upload/img"
                :show-file-list="false"
                :on-success="handleAvatarSuccess1"
                :before-upload="beforeAvatarUpload"
              >
                <el-image v-if="logoImgUrl" :src="logoImgUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="门店图片" prop="storeImg">
              <el-upload
                class="avatar-uploader"
                action="api/user/upload/img"
                :show-file-list="false"
                :on-success="handleAvatarSuccess2"
                :before-upload="beforeAvatarUpload"
              >
                <el-image v-if="storeImgUrl" :src="storeImgUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="营业时间" prop="time">
          <el-time-picker
            is-range
            v-model="shop.time"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
          ></el-time-picker>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="餐盒费" prop="boxCost">
              <el-input-number v-model="shop.boxCost" :precision="2" :step="0.5" :max="10"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="配送费" prop="sendCost">
              <el-input-number v-model="shop.sendCost" :precision="2" :step="0.5" :max="10"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" @click="editShop">确认完善信息</el-button>
          <div class="error">{{ error }}</div>
        </el-form-item>
      </el-form>
    </section>
  </div>
</template>
<script>
import * as homeApi from "@/server/home.js";
export default {
  layout: "blank",
  data() {
    return {
      error: "",
      storeImgUrl: "",
      logoImgUrl: "",
      shop: {
        shopId: '',
        contactMan: "",
        contactMobile: "",
        logoImg: "",
        storeImg: "",
        boxCost: 0,
        sendCost: 0,
        shopKind: "美食",
        time: "",
        address: ""
      }
    };
  },
  methods: {
    editShop: function() {
      homeApi.editShopDetail(this.shop).then(result => {
        console.log(result);
      });
    },
    handleAvatarSuccess1(res, file) {
      console.log(res);
      if (res == "null") {
        this.$message({
          type: "error",
          message: "上传失败!"
        });
        return;
      }
      this.logoImgUrl = "/api/user/image/get/" + res;
      this.shop.logoImg = res;
    },
    handleAvatarSuccess2(res, file) {
      console.log(res);
      if (res == "null") {
        this.$message({
          type: "error",
          message: "上传失败!"
        });
        return;
      }
      this.storeImgUrl = "/api/user/image/get/" + res;
      this.shop.storeImg = res;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    }
  },
  mounted() {
    this.shop.shopId = this.$route.query.shopId;
  }
};
</script>

<style lang="scss">
@import "@/assets/css/register/index.scss";
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
